demos.MDMpanel = Ext.extend( Ext.Panel, {
    btnCount: 0,
    bitWise: 0,
//    height: '200',
    idcount: 0,
    MDMtitle: [],
    MDMitems: [],
	panelItems: [],
    layoutOnOrientationChange: true,
	defaults: {
	},
//   html: 'Test1',
//   id: ROSpanel,
    initComponent: function() {
//    	demos.ROSpanel2.panelItems = new Array();
    	
//    	var Title = this.items.items[0].text;
    	
    	var MDMtitle = this.MDMtitle[0];
    	var mdmcount = this.idcount+1;   
    	
    	this.addEvents('mdmbutton');
        this.enableBubble('mdmbutton');

        Ext.apply(this, {
	    	items: [{
      	        layoutOnOrientationChange: true,
    	    	dockedItems: [{
                    xtype: 'multiselectfield',
                    name:	'Dx'+mdmcount,
	      	    	id:		'mdm_DxSelect'+mdmcount,
	      	    	dock:	'top',
      	        //    ui: 	this.ui,
	      	        layoutOnOrientationChange: true,
	                labelAlign: 'left',
	                labelWidth: '100',
                    label: Ext.is.Phone ? mdmcount+'. Prob: ' : mdmcount+'. Problem: ',
//		                        height: Ext.is.Phone ? '96' : '46',
                    options: [
                        { text: '', value: 'null' },
                        { text: 'Diag 1', value: 'diag1' },
                        { text: 'Diag 2', value: 'diag2' },
                        { text: 'Diag 3', value: 'diag3' },
                        { text: 'Diag 4', value: 'diag4' },
                        { text: 'Diag 5', value: 'diag5' },
                        { text: 'Diag 6', value: 'duag6' }
                    ],
	      	    }, {
	      	    	xtype:	'toolbar',
	      	    	id:		'mdm_newprobs'+mdmcount,
	      	    	dock:	'top',
	      	        ui: 	this.ui,
	      	        layoutOnOrientationChange: true,
	          		scroll: {
	      	            direction: 'horizontal',
	      	            useIndicators: false
	      	        },
	      	        defaults: {
	      	            width: 120,
	      	            scope: this,
	      	        //    handler:  this.buttonPN,
	      	        },
		            items:[{
		            	xtype: 'button',
	      	        	id: 'mdm_newprob'+mdmcount,
	               	    ui: 'action',
	               	    cls: 'flat-x-button',
	               	    text: Ext.is.Phone ? 'New Prob' : 'New Problem',
	      	            width: Ext.is.Phone ? 80 : 150,
		            }, {
	      	        	xtype: 'segmentedbutton',
	      	        	id: 'mdm_newprobsel'+mdmcount,
	      	        	allowDepress: true,
	      	            handler:  function( btn, evt) {
							if (btn.ui == 'normal') {
								btn.ui = 'action';                                
								btn.el.removeCls('x-button-normal');
								btn.el.addCls('x-button-mdm');
							} else {
								btn.ui = 'normal';                                
								btn.el.removeCls('x-button-mdm');
								btn.el.addCls('x-button-normal');
							}
	      	            },
		            	items: [{
				            id: 'chrprob',
				            name: 'chrprob',
				            text: 'Chronic Problem',
		            	}, {
				            id: 'improved',
				            name: 'improved',
				            text: 'Improved',
				        }, {
				            id: 'wellctrl',
				            name: 'wellctrl',
				            text: 'Well Controlled',
				        }, {
				            id: 'reslving',
				            name: 'reslving',
				            text: 'Resolving',
				        }, {
				            id: 'reslved',
				            name: 'reslved',
				            text: 'Resolved',
				        }, {
				            id: 'inadqcntrld',
				            name: 'inadqcntrld',
				            text: 'Inadquately Controlled',
				        }],
		            }]
//			    	        panelItems: this
	      	    }, {
	      	    	xtype:	'toolbar',
	      	    	id:		'mdm_chgmade'+mdmcount,
	      	    	dock:	'top',
	      	        ui: 	this.ui,
	      	        layoutOnOrientationChange: true,
	          		scroll: {
	      	            direction: 'horizontal',
	      	            useIndicators: false
	      	        },
		            items:[{
		            	xtype: 'button',
	      	        	id: 'mdm_chgmadesel'+mdmcount,
	               	    ui: 'action',
	               	    cls: 'flat-x-button',
	               	    text: Ext.is.Phone ? 'Chg Made' : 'Changes Made',
	      	            width: Ext.is.Phone ? 80 : 150,
		            }, {
		            	xtype: 'panel',
		            	layout: 'hbox',
		            	defaults: {
			            	xtype: 'button',
		      	            width: 120,
			            	pack: 'start',
		      	            scope: this,
		      	            handler:  function( btn, evt) {
		      	            	console.debug(x=btn);
								btn.el.removeCls('x-button-normal');
								btn.el.addCls('x-button-mdm');
								if (btn.ui == 'normal') {
									btn.ui = 'confirm';                                
									btn.el.removeCls('x-button-normal');
									btn.el.addCls('x-button-confirm');
								} else {
									btn.ui = 'normal';                                
									btn.el.removeCls('x-button-confirm');
									btn.el.addCls('x-button-normal');
								}
		      	            },
		      	        },
		            	items: [{
				            id: 'patinstruct',
				            name: 'patinstruct',
				            text: 'Pt. Instructions',
				        }, {
				            id: 'rninstruct',
				            name: 'rninstruct',
				            text: 'RN Instructions',
				        }, {
				            id: 'therapies',
				            name: 'therapies',
				            text: 'Therapies',
				        }, {
				            id: 'medications',
				            name: 'medications',
				            text: 'Medications',
				        }, {
				            id: 'diagsrvord',
				            name: 'diagsrvord',
				            text: 'Diag. Srvcs Ordered',
		      	            width: 150,
				        }]
		            }]
	      	    }, {
	      	    	xtype:	'toolbar',
	      	    	id:		'mdm_risks'+mdmcount,
	      	    	dock:	'top',
	      	        ui: 	this.ui,
	      	        layoutOnOrientationChange: true,
	          		scroll: {
	      	            direction: 'horizontal',
	      	            useIndicators: false
	      	        },
	      	        defaults: {
	      	            xtype: 'button',
	      	            width: 120,
	      	            scope: this,
	      	        //    handler:  this.buttonPN,
	      	        },
		            items:[{
		            	xtype: 'button',
	      	        	id: 'mdm_riskssel'+mdmcount,
	               	    ui: 'action',
	               	    cls: 'flat-x-button',
	               	    text: 'Risks',
	      	            width: Ext.is.Phone ? 80 : 150,
		            }, {
		            	xtype: 'panel',
		            	layout: 'hbox',
		            	defaults: {
			            	xtype: 'button',
		      	            width: 120,
			            	pack: 'start',
		      	            scope: this,
		      	            handler:  function( btn, evt) {
		      	            	console.debug(x=btn);
								btn.el.removeCls('x-button-normal');
								btn.el.addCls('x-button-mdm');
								if (btn.ui == 'normal') {
									btn.ui = 'confirm';                                
									btn.el.removeCls('x-button-normal');
									btn.el.addCls('x-button-confirm');
								} else {
									btn.ui = 'normal';                                
									btn.el.removeCls('x-button-confirm');
									btn.el.addCls('x-button-normal');
								}
		      	            },
		      	        },
		            	items: [{
				            id: 'complicate',
				            name: 'complicate',
				            text: 'Complicated',
				        }, {
				            id: 'comorbid',
				            name: 'comorbid',
				            text: 'Comorbidities',
				        }, {
				            id: 'advage',
				            name: 'advage',
				            text: 'Advanced Age',
				        }]
		            }]
	      	    }, 	{
        	    	xtype:	'panel',	//panel
        	    	dock: 	'top',
        	    	width:	'100%',
        	    	height: 81,
        	    	layout:	{
        	    		type:	'hbox',
        	    		pack:	'start',
        	    		align:	'start'
        	    	},
        	    	items: [{			//dockedItems
        	    		xtype : "textareafield",
		      	    	id:		'mdm_textarea'+mdmcount,
                        name:	'DxText'+mdmcount,
	        	    	width:	Ext.is.Phone ? '200' : screen.width-154,
	        	    	maxRows: 3,
//	        	    	flex: 	100,
	        	    	minHeight: 81,
	      	            ui: 	this.ui,
		      	        layoutOnOrientationChange: true,
		                labelAlign: 'left',
		                labelWidth: '74',
                        label: mdmcount+'. Plan: ',
/*	                        itemSelector: 'div.testbutton',
	                		tpl: new Ext.XTemplate(
	                			'<tpl for=".">',
	                				'<div class="testbutton" id="renderbutton"></div>',
	                			'</tpl>'),
                            listeners:{
                                afterrender:function(){
                                        new Ext.Button({
		                					text:'Button',
		                					ui:'action',
		                					renderTo:'renderbutton'
		                				});
	                            }
                            } */
		      	    }, {
        	    		xtype : "textfield",
        	    		plugins : { ptype : "form.speech" },
		      	    	id:		'mdm_textspeech'+mdmcount,
                        name:	'DxTextspeech'+mdmcount,
		      	    	dock:	'top',
	        	    	width:  34,
//	        	    	flex:	2,
	      	            ui: 	this.ui,
		      	        layoutOnOrientationChange: true,
		      	    }, {
    					xtype:	'spacer',
    					width: '10',
		      	    	dock:	'top',
//	        	    	flex:	1,
		      	    }, {
    					xtype:	'button',
      	    			iconCls: 'iconRec',
      	    			iconMask: true,
		      	    	cls:	'rec_button',
		      	    	dock:	'top',
//	        	    	flex:	2,
    				//	ui:		'normal',
                        handler: function(){
                            var panelLaunch = function(pluginConfig, panelContent){
                                var pnl = new Ext.Panel({
                                    floating: true,
                                    width: Ext.is.Phone ? 300 : 340,
                                    height: 200,
                                    centered: true,
                                    modal: true,
        							hideMode: 'close',
                                    hideOnMaskTap: false,
                                    layout: 'fit',
                                    html: 'Record Window',
        							showAnimation: {
        								type: 'pop',
        								duration: 250
        							},
                                    plugins: [new Ext.ux.PanelAction(pluginConfig)]
                                });
                                
                                pnl.show();
                            };
                            
                            panelLaunch({
                                iconClass: 'x-panel-action-icon-close',
                                position: 'br',
                            }, 'Playback');
                        },   
		      	    }, {
    					xtype:	'spacer',
    					width: '10',
    		      	    dock:	'top',
//	        	    	flex:	1,
        	    	}, {
    					xtype:	'button',
      	    			iconCls: 'iconPlay',
      	    			iconMask: true,
		      	    	cls:	'play_button',
		      	    	dock:	'top',
//	        	    	flex:	2,
    				//	ui:		'normal',
                        handler: function(){
                            var panelLaunch = function(pluginConfig, panelContent){
                                var pnl = new Ext.Panel({
                                    floating: true,
                                    width: Ext.is.Phone ? 300 : 340,
                                    height: 200,
                                    centered: true,
                                    modal: true,
    			                    layout: {
    			                        type: 'vbox',
    			                        pack: 'center'
    			                    },
        							hideMode: 'close',
                                    hideOnMaskTap: false,
                                    //layout: 'fit',
                                    //html: panelContent,
    			                    items: [{
    			                        xtype: 'audio',
    			                        url: 'audio/mdm1.mp3',
    			                        loop: true
    			                    }],
        							showAnimation: {
        								type: 'pop',
        								duration: 250
        							},
                                    plugins: [new Ext.ux.PanelAction(pluginConfig)]
                                });
                                
                                pnl.show();
                            };
                            
                            panelLaunch({
                                iconClass: 'x-panel-action-icon-close',
                                position: 'br',
                            }, 'Playback');
                        },   
        	    	
		      	    
		      	    
		      	    
		      	    
		      	    
		      	    
		      /*	    {
	        	    	xtype:	'panel',
	        	    	dock:	'right',
	        	    	width:	'80',
	        	    	items: [{
        					xtype:	'button',
	      	    			iconCls: 'iconRec',
	      	    			iconMask: true,
        					ui:		'normal',
	        	    	}, {
        					xtype:	'button',
	      	    			iconCls: 'iconPlay',
	      	    			iconMask: true,
        					ui:		'normal',
                            handler: function(){
                                var panelLaunch = function(pluginConfig, panelContent){
                                    var pnl = new Ext.Panel({
                                        floating: true,
                                        width: Ext.is.Phone ? 300 : 340,
                                        height: 200,
                                        centered: true,
                                        modal: true,
        			                    layout: {
        			                        type: 'vbox',
        			                        pack: 'center'
        			                    },
            							hideMode: 'close',
                                        hideOnMaskTap: false,
                                        //layout: 'fit',
                                        //html: panelContent,
        			                    items: [{
        			                        xtype: 'audio',
        			                        url: 'audio/mdm1.mp3',
        			                        loop: true
        			                    }],
           								showAnimation: {
            								type: 'pop',
            								duration: 250
            							}, 
                                        plugins: [new Ext.ux.PanelAction(pluginConfig)]
                                    });
                                    
                                    pnl.show();
                                };
                                
                                panelLaunch({
                                    iconClass: 'x-panel-action-icon-close',
                                    position: 'br',
                                }, 'Playback');
                            },
                            


/*        			        handler: function() {
        			            if (!this.popup) {
        			                    floating: true,
        			                    modal: true,
        			                    centered: true,
        			                    width: 300,
        			                    height: 200,
        			                    layout: {
        			                        type: 'vbox',
        			                        pack: 'center'
        			                    },
        			                    items: [{
        			                        xtype: 'audio',
        			                        url: 'audio/mdm1.mp3',
        			                        loop: true
        			                    }]
        			                });
        			            }
        			            this.popup.show('pop');
        			        }
	      	    		}]  -->/*/
		      	    }, {
    					xtype:	'spacer',
    					width: '10',
   		      	    	dock:	'top',
//	        	    	flex:	1,
    					//	ui:		'normal',
		      	    }]
    	    	}]
	    	}]
        });
        
        demos.MDMpanel.superclass.initComponent.apply(this, arguments);
    },
    
    
//	getBubbleTarget: function() {
//	    return examcontrol;
//	},
	
});

Ext.reg('mdmpanel', demos.MDMpanel);
